<template>
  <div style="display: inline-block;">
    <template v-for="(item, index) in options">
      <template v-if="values.includes(item.dictValue)">
        <span
          v-if="isText || isBadge"
          :key="item.dictValue"
          :style="{ 
            color: !isBadge && item.color ? item.color : '', 
            border: showBorder ? `solid 1px ${item.color}` : 'none',
          }"
          :class="{'br-4 _pl-4 _pr-4': showBorder}"
          class="tagBox"
        >
          <a-badge v-if="isBadge && item.color" :color="item.color" />
          {{ item.dictLabel }}
        </span>
        <template v-else>
          <a-tag
            :disable-transitions="true"
            :key="item.dictValue"
            :index="index"
            :color="item.color || ''"
            class="tagBox"
          >
            {{ item.dictLabel }}
          </a-tag>
        </template>
      </template>
    </template>
  </div>
</template>

<script>
export default {
  name: 'DictTag',
  props: {
    options: {
      type: Array,
      default: null,
    },
    value: [Number, String, Array],
    // 文本类型
    isText: {
      type: Boolean,
      default: false,
    },
    // 显示边框
    showBorder: {
      type: Boolean,
      default: false,
    },
    // 圆点类型
    isBadge: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    values() {
      if (this.value !== null && typeof this.value !== 'undefined') {
        return Array.isArray(this.value) ? this.value : [this.value]
      } else {
        return []
      }
    },
  },
}
</script>
<style lang="less" scoped>
.tagBox{
  margin-right: 0;
}
.tagBox+.tagBox{
  margin-left: 5px;
}
</style>